const Modal = Vue.defineComponent({
	props: {
		value: Boolean
	},
	data() {
		return {
			show: this.value
		};
	},
	watch: {
		value(val) { // 监听父组件传过来的属性
			this.show = val;
		},
		show(val) { // 变化通知父组件
			this.$emit('update', val);
		}
	},
	methods: {
		confirm() {
			this.show = false;
			alert('确认');
		}
	},
	template: `
    <div class="modal" id="myModal" v-if="show" @click.prevent="show = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2 class="modal-title">这是标题</h2>
          <span class="close-btn" @click="show = false">&times;</span>
        </div>
        <div class="modal-body">
          <p>这是一个简单的弹窗示例。你可以在这里放置任何内容，比如表单、图片或文本。</p>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="confirm">确认</button>
          <button class="btn" @click="show = false" style="background-color: #f44336;">取消</button>
        </div>
      </div>
    </div>
  `
});
